<template>
	<view class="page">
		<view class="btns">
			<view class="left">
				<u-text :text="today" suffixIcon="arrow-down" bold size="16" @click="show = true"></u-text>
			</view>
			<view class="right">
				<view class="btn" :class="btns[0] && 'active'" @click="btnClick(0)">收入</view>
				<view class="btn" :class="btns[1] && 'active'" @click="btnClick(1)">支出</view>
			</view>
		</view>

		<view class="summary">
			<u-text text="月收入" bold=""></u-text>
			<u-text text="￥888.00" size="60rpx" color="#3662EC" bold margin="6rpx 0 10rpx -12rpx"></u-text>
			<u-text text="共600笔" color="#AAAAAA"></u-text>
		</view>

		<view class="charts">
			<view class="title">收入对比</view>
			<view class="btnBox">
				<view class="btn" :class="dateBtns[0] && 'active'" @click="dateClick(0)">月</view>
				<view class="btn" :class="dateBtns[1] && 'active'" @click="dateClick(1)">日</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch='true'
					tooltipFormat="tooltip1" />
			</view>
		</view>
		<u-datetime-picker :show="show" v-model="value" mode="year-month" @cancel="show = false" @confirm="confirmDate"
			:maxDate="date"></u-datetime-picker>
	</view>
	<!--  -->
</template>

<script>
export default {
	data() {
		return {
			show: false,
			value: "",
			today: "",
			btns: [true, false],
			dateBtns: [true, false],
			chartData: {},
			opts: {
				color: ["#D7E0FB"],
				enableScroll: true,
				padding: [15, 15, 0, 5],
				legend: { show: false },
				update: true,
				xAxis: {
					disableGrid: true,
					itemCount: 6,
					axisLineColor: '#3662EC'
				},
				yAxis: {
					disabled: true,
					disableGrid: true,
				},
				extra: {
					column: {
						type: "group",
						activeBgOpacity: 0,
						linearType: "none",
						categoryGap: 4,
						linearOpacity: 0.5,
						barBorderCircle: true,
					}
				},
				series: {
					textColor: "#3662EC",
					format: 'prefixYuan'
				}
			}
		}
	},
	onLoad() {
		const date = new Date()
		const currentYear = date.getFullYear()
		const currentMonth = date.getMonth() + 1
		this.today = `${currentYear}年${currentMonth}月`
		this.getServerData()
	},
	methods: {
		confirmDate(e) {
			const timestamp = e.value
			const time = new Date(timestamp)
			const year = time.getFullYear()
			const month = time.getMonth() + 1
			this.today = `${year}年${month}月`
			this.show = false
		},
		btnClick(index) {
			this.btns = [false, false]
			this.btns[index] = true
		},
		dateClick(index) {
			this.dateBtns = [false, false]
			this.dateBtns[index] = true
			if (index == 0) {
				this.getServerData(1)
				this.opts.xAxis.itemCount = 6
			} else {
				this.getServerData(2)
				this.opts.xAxis.itemCount = 12
			}
		},
		getServerData(e) {
			console.log('getServerData');
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
					series: [
						{
							name: "",
							textColor: "#3662EC",
							data: [35, 36, 33, 13, 34, 35, 31, 33, 13, 26, 19, { value: 27, color: '#3662EC' }],
							format: 'prefixYuan'

						},
					]
				}
				let res1 = {
					categories: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12",
						"13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24",
						"25", "26", "27", "28", "29", "30"],
					series: [
						{
							name: "",
							textColor: "#3662EC",
							data: [35, 36, 33, 13, 34, 35, 31, 33, 13, 26, 19, { value: 27, color: '#3662EC' },
								35, 36, 33, 13, 34, 35, 31, 33, 13, 26, 19, 35, 36, 33, 13, 34, 35],
							format: 'prefixYuan'

						},
					]
				}
				if (e == 1) {
					console.log(1111);
					this.chartData = JSON.parse(JSON.stringify(res));
				} else {
					console.log(2222)
					this.chartData = JSON.parse(JSON.stringify(res1));
				}
			}, 1000);
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	padding: 30rpx 40rpx;
	background: linear-gradient(180deg, #E0EAFF 0%, rgba(224, 234, 255, 0.00) 47%);
}

.btns {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 30rpx;

	.right {
		display: flex;

		.btn {
			border: 1px transparent solid;
			padding: 4rpx 20rpx;
			margin-left: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 14px;
			box-sizing: border-box;

			&.active {
				border-color: #3662EC;
				color: #3662EC;
			}
		}
	}
}

.summary {
	border-radius: 10px;
	background-color: white;
	padding: 30rpx 30rpx 40rpx 30rpx;
	margin-top: 30rpx;
}

.charts {
	padding: 0 20rpx;
	margin-top: 24rpx;
	background-color: white;
	border-radius: 10px;

	.title {
		padding: 30rpx 10rpx;
		font-size: 34rpx;
		font-weight: bold;
		border-bottom: 1px #D8D8D8 solid;
	}

	.btnBox {
		width: 200rpx;
		height: 50rpx;
		background-color: #EEEEEE;
		border-radius: 60rpx;
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;

		.btn {
			flex: 1;
			display: flex;
			justify-content: center;
			line-height: 46rpx;
			border-radius: 60rpx;

			&.active {
				background-color: #3662EC;
				color: white;
			}
		}
	}

	.charts-box {
		width: 100%;
		margin-top: 80rpx;
		height: 600rpx;
	}
}
</style>
